<template>
  <view class="payment-page">
    <view class="payment-container">
      <view class="page-title">订单确认</view>
      <view class="order-info-card">
        <view class="card-header">
          <text class="header-title">订单信息</text>
        </view>
        <view class="order-details">
          <view class="detail-item">
            <text class="label">订单编号：</text>
            <text class="value">{{ orderInfo.orderNo }}</text>
          </view>
          <view class="detail-item">
            <text class="label">球桌：</text>
            <text class="value">{{ orderInfo.productName }}</text>
          </view>
          <view class="detail-item">
            <text class="label">预约日期：</text>
            <text class="value">{{ orderInfo.date }} {{ orderInfo.week }}</text>
          </view>
          <view class="detail-item">
            <text class="label">预约时间：</text>
            <text class="value">{{ orderInfo.timeSlot }}</text>
          </view>
          <view class="detail-item">
            <text class="label">时长：</text>
            <text class="value">{{ orderInfo.duration }}小时</text>
          </view>
        </view>
      </view>

      <view class="payment-info-card">
        <view class="card-header">
          <text class="header-title">费用明细</text>
        </view>
        <view class="payment-details">
          <view class="detail-item">
            <text class="label">单价：</text>
            <text class="value">¥{{ orderInfo.price }}/小时</text>
          </view>
          <view class="detail-item">
            <text class="label">时长：</text>
            <text class="value">{{ orderInfo.duration }}小时</text>
          </view>
          <view class="detail-item total-amount">
            <text class="label">总计：</text>
            <text class="value amount">¥{{ orderInfo.orderPayPrice }}</text>
          </view>
        </view>
      </view>

      <view class="payment-method">
        <view class="method-title">支付方式</view>
        <view class="method-item active">
          <view class="method-icon wechat-pay"></view>
          <text class="method-name">微信支付</text>
          <view class="method-selector">
            <view class="selector-inner"></view>
          </view>
        </view>
      </view>

      <view class="payment-button-container">
        <button class="payment-button" @click="handlePayment">
          立即支付 ¥{{ orderInfo.orderPayPrice }}
        </button>
      </view>

      <!-- 支付结果弹窗 -->
      <view class="payment-modal" v-if="showPaymentModal">
        <view class="modal-content">
          <view class="modal-icon" :class="paymentResult.status">
            <text v-if="paymentResult.status === 'success'">√</text>
            <text v-else>×</text>
          </view>
          <view class="modal-title">{{ paymentResult.title }}</view>
          <view class="modal-message">{{ paymentResult.message }}</view>
          <view class="modal-actions">
            <button class="modal-button" @click="closePaymentModal">{{ paymentResult.buttonText }}</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app';
import {
  getOrderDetails,
  payOrder
} from '@/services/order.js';
import {
  formatDateTimeRange
} from '@/utils/date.js';
// 订单信息
const orderInfo = ref({});

// 支付结果模态框
const showPaymentModal = ref(false);
const paymentResult = ref({
  status: 'success', // success 或 fail
  title: '',
  message: '',
  buttonText: ''
});

// 页面加载时获取参数
onLoad(async (options) => {
  if (options.orderNo) {
    try {
      // 调用接口获取订单详情
      const res = await getOrderDetails(options.orderNo);
      if (res.code === 200) {
        orderInfo.value = res.data
        const {
          formattedDate,
          formattedTimeSlot
        } = formatDateTimeRange(res.data.priceDateTimeRangeVOList);
        const datePart = formattedDate.split(' ')[0];
        const weekPart = formattedDate.split(' ')[1];
        Object.assign(orderInfo.value, {
          date: datePart,
          week: weekPart,
          timeSlot: formattedTimeSlot,
          duration: res.data.priceDateTimeRangeVOList.length,
          price: res.data.priceDateTimeRangeVOList[0].price
        });
      } else {
        throw new Error(res.message || '获取订单详情失败');
      }
    } catch (error) {
      console.error('获取订单详情失败：', error);
      uni.showToast({
        title: '订单数据获取失败',
        icon: 'none'
      });
    }
  } else {
    uni.showToast({
      title: '缺少订单信息',
      icon: 'none'
    });
  }
});

// 处理支付
const handlePayment = async () => {
  console.log('发起支付，订单号：', orderInfo.value.orderNo);

  const data = await payOrder(orderInfo.value.orderNo);
  console.log(data)
  if (data.code == 200) {
    // 支付成功
    paymentResult.value = {
      status: 'success',
      title: '支付成功',
      message: '您的订单已支付成功，可前往订单详情查看',
      buttonText: '查看订单'
    };
  } else {
    paymentResult.value = {
      status: 'fail',
      title: '支付失败',
      message: '支付未成功，请检查网络或更换支付方式后重试',
      buttonText: '重新支付'
    };
  }

  showPaymentModal.value = true;
};

const closePaymentModal = () => {
  showPaymentModal.value = false;
  if (paymentResult.value.status === 'success') {
    uni.reLaunch({
      url: `/pages/mine/orderDetail?orderNo=${orderInfo.value.orderNo}`
    })
  };
};
</script>

<style lang="scss">
.payment-page {
  min-height: 100vh;
  background: linear-gradient(110.13deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 15px;

  .payment-container {
    .page-title {
      font-size: 20px;
      text-align: center;
      margin: 10px 0 20px;
      font-weight: 700;
      color: rgba(81, 89, 245, 1);
    }

    .order-info-card,
    .payment-info-card {
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

      .card-header {
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;

        .header-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
      }

      .order-details,
      .payment-details {
        padding: 15px;

        .detail-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #666;
            font-size: 14px;
            min-width: 160rpx;
          }

          .value {
            color: #333;
            font-size: 14px;
          }

          &.total-amount {
            margin-top: 10px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;

            .amount {
              color: #ff6600;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }

    .payment-method {
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 15px;

      .method-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
      }

      .method-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #f0f0f0;

        &.active {
          border-color: #1aad19;
          background-color: #f6fff7;
        }

        .method-icon {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 10px;
          position: relative;

          &.wechat-pay {
            background-color: #1aad19;

            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 14px;
              height: 14px;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm6.5 6.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-11 0c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm6 6.5c-1.93 0-3.5 1.57-3.5 3.5v1h-1v2h6v-2h-1v-1c0-2.76-2.24-5-5-5z'/%3E%3C/svg%3E");
              background-size: contain;
              background-repeat: no-repeat;
              transform: translate(-50%, -50%);
            }
          }
        }

        .method-name {
          flex: 1;
          font-size: 14px;
          color: #333;
        }

        .method-selector {
          width: 20px;
          height: 20px;
          border: 1px solid #ccc;
          border-radius: 50%;

          .selector-inner {
            width: 12px;
            height: 12px;
            background-color: #1aad19;
            border-radius: 50%;
            margin: 3px;
            display: none;
          }
        }

        &.active {
          .selector-inner {
            display: block;
          }
        }
      }
    }

    .payment-button-container {
      padding: 20px 0 10px;

      .payment-button {
        width: 100%;
        background-color: #165dff;
        color: #fff;
        border: none;
        padding: 15px;
        font-size: 16px;
        border-radius: 8px;
        font-weight: bold;
        }
      }
    }

    .payment-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;

      .modal-content {
        background-color: #fff;
        border-radius: 10px;
        width: 80%;
        max-width: 300px;
        padding: 25px 20px;
        text-align: center;

        .modal-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin: 0 auto 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          font-weight: bold;

          &.success {
            background-color: #e8f8e8;
            color: #1aad19;
          }

          &.fail {
            background-color: #fae8e8;
            color: #e33;
          }
        }

        .modal-title {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #333;
        }

        .modal-message {
          font-size: 14px;
          color: #666;
          margin-bottom: 20px;
          line-height: 1.5;
        }

        .modal-button {
          background-color: #165dff;
          color: #fff;
          border: none;
          padding: 10px 20px;
          font-size: 14px;
          border-radius: 6px;
          width: 100%;
        }
      }
    }
  }

</style>